import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Chart, Tooltip, Axis, Legend, Bar, Interval } from 'viser-react';
import { formatName, forIdCard } from '../../utils/utils';
import { uploadUrl } from '../../config/index'
import Picture from '../../assets/picture.png'
const DataSet = require('@antv/data-set');
import {
  Form,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Button,
  Popconfirm,
  Modal,
  Tabs,
  Table,
  Avatar,
  Spin,
  Radio,
  Checkbox,
  InputNumber,
  message,
  Card,
  Icon, Upload,
  Alert,
  Popover,
} from 'antd';
import moment from 'moment';
import router from 'umi/router';

import statusConfig from '@/config/status.config';
import statusConfigList from '@/config/status_list.js';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './TableList.less';
import { getShopAdminId } from '../../utils/localStorage'
const { Meta } = Card;
const { Option } = Select;
const { TabPane } = Tabs;
const FormItem = Form.Item;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const formatStr = 'YYYY-MM-DD hh:mm:ss';
const timeStr = 'YYYY-MM-DD ';
/* eslint-disable camelcase */
/* eslint-disable no-script-url */
/* eslint react/no-multi-comp:0 */

function statusObj2Arr(statusObj) {
  return Object.keys(statusObj).map(item => {
    return {
      key: item,
      value: statusObj[item],
    };
  });
}
const statusArr = statusObj2Arr(statusConfig);
function dateTimeFormat(timeArr) {
  if (timeArr) {
    return timeArr.map(ele => {
      return ele && moment(ele).format(timeStr);
    });
  }
  return timeArr;
}
const CreateDeliverForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    deliverOptions,
    handleModalVisible,
    handleDeliver,
    modalStyle,
    radioValue,
    checkValue,
    damageVal,
    onRadioChange,
    damageValue,
    onCheckChange,
    remark,
    record,
    idCardNo,
    reportDetal,
    buyoutPrice,
    picturesList,
    handlePreview,
    handleCancel,
    previewVisible,
    previewImage,
    userIdCardPhotoCertStatus,
    userFaceCertStatus,
    ocr,
    recordOrder
  } = props;

  const {
    base_info,
    court_risk_info_list,
    hit_risk_taggin,
    multiple_score,
    personal_loan_demand,
    personal_loan_f,
    personal_loan_s,
    personal_overdue_history,
    queryReportTime,
    relevance_risk_check,
    reportNo,
    risk_list_check,
    score_norm_explain,
    verify_recomment,
    riskLevelData,
    riskGoInfo,
    riskGo,
    loading,
    totalPay,
  } = reportDetal;

  // 申请

  const sourceData1 = [
    {
      name: '近12个月申请机构总数',
      近1个月: personal_loan_s && personal_loan_s.apply_time1,
      近3个月: personal_loan_s && personal_loan_s.apply_time3,
      近6个月: personal_loan_s && personal_loan_s.apply_time6,
      近12个月: personal_loan_s && personal_loan_s.apply_time12,
    },
    {
      name: '消费分期类申请机构数',
      近12个月: personal_loan_s && personal_loan_s.consumer_apply_mechanism_number,
    },
    {
      name: '机构贷款类申请机构数',
      近12个月: personal_loan_s && personal_loan_s.network_loan_apply_mechanis_mnumber,
    },
  ];

  // 放款

  const sourceData2 = [
    {
      name: '近12个月放款机构总数',
      近1个月: personal_loan_f && personal_loan_f.lend_number1,
      近3个月: personal_loan_f && personal_loan_f.lend_number3,
      近6个月: personal_loan_f && personal_loan_f.lend_number6,
      近12个月: personal_loan_f && personal_loan_f.lenders,
    },
    {
      name: '消费分期类放款机构数',
      近12个月: personal_loan_f && personal_loan_f.cflenders,
      // '近12个月': 81,
    },
    {
      name: '机构贷款类放款机构数',
      近12个月: personal_loan_f && personal_loan_f.nllenders,
      // '近12个月': 61,
    },
  ];

  // 逾期
  const sourceData3 = [
    {
      name: '近6个月逾期机构总数',
      近6个月逾期机构总数:
        personal_overdue_history && personal_overdue_history.overdue_mechanism_number,
    },
    {
      name: '进6个月逾期总次数',
      进6个月逾期总次数: personal_overdue_history && personal_overdue_history.overdue_total_counts,
    },
    {
      name: '近6个月未结算逾期次数',
      进6个月逾期总次数: personal_overdue_history && personal_overdue_history.uncleared_counts,
    },
    {
      name: '近6个月逾期总金额(元)',
      近6个月逾期总金额: personal_overdue_history && personal_overdue_history.overdue_total_money,
    },
  ];

  // 关联风险监测
  const sourceData4 = [
    {
      name: '3个月身份证手机号次数',
      '3个月身份证手机号次数': relevance_risk_check && relevance_risk_check.ident_to_phone_counts,
    },
    {
      name: '3个月手机号关联身份证次数',
      '3个月手机号关联身份证次数':
        relevance_risk_check && relevance_risk_check.phone_to_ident_counts,
    },
  ];

  // 贷款需求
  const sourceData5 = [
    {
      name: 'p2p平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.p2p_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.p2p_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.p2p_platform,
    },
    {
      name: '信用卡',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.credit_card,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.credit_card,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.credit_card,
    },
    {
      name: '消费分期平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.common_amortize_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.common_amortize_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.common_amortize_platform,
    },
    {
      name: '消费金融公司',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.large_finance_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.large_finance_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.large_finance_platform,
    },
    {
      name: '其他平台',
      近7天:
        personal_loan_demand &&
        personal_loan_demand.wx_datad7 &&
        personal_loan_demand.wx_datad7.other_platform,
      近30天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam1 &&
        personal_loan_demand.wx_datam1.other_platform,
      近90天:
        personal_loan_demand &&
        personal_loan_demand.wx_datam3 &&
        personal_loan_demand.wx_datam3.other_platform,
    },
  ];
  const dv1 = new DataSet.View().source(sourceData1);
  const dv2 = new DataSet.View().source(sourceData2);
  const dv3 = new DataSet.View().source(sourceData3);
  const dv4 = new DataSet.View().source(sourceData4);
  const dv5 = new DataSet.View().source(sourceData5);

  dv1.transform({
    type: 'fold',
    fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
    key: '月份',
    value: '月均降雨量',
  });

  dv2.transform({
    type: 'fold',
    fields: ['近1个月', '近3个月', '近6个月', '近12个月'],
    key: '月份',
    value: '月均降雨量',
  });

  dv3.transform({
    type: 'fold',
    fields: [
      '近6个月逾期机构总数',
      '进6个月逾期总次数',
      '近6个月未结算逾期次数',
      '近6个月逾期总金额',
    ],
    key: '月份',
    value: '月均降雨量',
  });

  dv4.transform({
    type: 'fold',
    fields: ['3个月身份证手机号次数', '3个月手机号关联身份证次数'],
    key: '月份',
    value: '月均降雨量',
  });

  dv5.transform({
    type: 'fold',
    fields: ['近7天', '近30天', '近90天'],
    key: '月份',
    value: '月均降雨量',
  });
  const data1 = dv1.rows;
  const data2 = dv2.rows;
  const data3 = dv3.rows;
  const data4 = dv4.rows;
  const data5 = dv5.rows;

  let score_Text = null;
  if (multiple_score >= 0 && multiple_score <= 50) {
    score_Text = '低风险';
  } else if (multiple_score >= 51 && multiple_score <= 80) {
    score_Text = '中风险';
  } else {
    score_Text = '高风险';
  }
  let proposal = null;
  if (multiple_score >= 0 && multiple_score <= 30) {
    proposal = '建议通过';
  } else if (multiple_score >= 30 && multiple_score <= 50) {
    proposal = '建议通过';
  } else if (multiple_score >= 50 && multiple_score <= 60) {
    proposal = '手机建议审核后通过,其他建议通过';
  } else if (multiple_score >= 60 && multiple_score <= 70) {
    proposal = '手机建议审核后通过,其他建议通过';
  } else if (multiple_score >= 70 && multiple_score <= 80) {
    proposal = '手机,数码等高价值商品审核后预收租金，其他建议通过';
  } else if (multiple_score >= 80 && multiple_score <= 90) {
    proposal = '手机，数码等高价值商品建议拒绝，其他建议通过';
  } else {
    proposal = '建议拒绝';
  }
  const grid12 = {
    width: '11.9%',
    textAlign: 'center',
  };
  const grid14 = {
    width: '14.28%',
    textAlign: 'center',
  };
  const grid16 = {
    width: '16.66%',
    textAlign: 'center',
  };
  const gridStyle = {
    width: '20%',
    textAlign: 'center',
  };
  const grid25 = {
    width: '25%',
    textAlign: 'center',
  };
  const grid30 = {
    width: '33.3%',
    textAlign: 'center',
  };
  const grid40 = {
    width: '40%',
    textAlign: 'center',
  };
  const grid50 = {
    width: '50%',
    textAlign: 'center',
  };
  const grid60 = {
    width: '60%',
    textAlign: 'center',
  };
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleDeliver(fieldsValue);
      form.resetFields();
    });
  };


  const typesObj = {
    deliver: '快速发货',
    remark: '新增备注',
    settle: '结算',
    card: '身份信息',
    buyoutPrice: '修改买断价格',
    contract: '电子合同'
  };

  let fileList = [];
  if (!!picturesList && !!picturesList.length) {
    picturesList.map((item, index) => (
      fileList.push({ ...item, status: 'done', uid: index })
    ))
  }
  return (
    <div>
      {modalStyle === 'card' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="600px"
          onCancel={() => handleModalVisible()}
          footer={null}
        >
          {modalStyle === 'card' && (
            <div>
              <Alert message={
                <div>
                  <h4>建议贵重商品(手机及高价值电脑等）发货前联系客户完成证照及人脸认证（入口在：小程序我的身份信息）</h4>
                  <p>1.身份证照和人脸认证已升级为机器自动识别</p>
                  <p>2.账单逾期超过15天后，证照支持可查看 </p>
                </div>
              } type="error" />
              {/* <p>是否通过实名认证：</p> */}
              <p style={{ marginTop: 10 }}>是否通过身份证照认证：{userIdCardPhotoCertStatus ? <span style={{ color: 'green' }}>通过</span> : <span style={{ color: 'red' }}>未完成</span>}</p>
              <p>是否通过人脸认证：{userFaceCertStatus ? <span style={{ color: 'green' }}>通过</span> : <span style={{ color: 'red' }}>未完成</span>}</p>
              {
                ocr ? ocr.idCardFrontUrl || ocr.idCardBackUrl ? (
                  <div style={{ marginTop: 10 }}>
                    <h3>身份证照</h3>
                    <img src={ocr && ocr.idCardFrontUrl} style={{ width: '100%', height: '100%', }} />
                    <img src={ocr && ocr.idCardBackUrl} style={{ padding: '10px 0', width: '100%', height: '100%', }} />
                  </div>
                ) : null : null
              }
            </div>
          )}
        </Modal>
      )}
      {modalStyle === 'deliver' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <div>
            <FormItem>
              {form.getFieldDecorator('expressId', {})(
                <Select style={{ width: '100%' }} placeholder="请选择物流公司">
                  {deliverOptions.map(option => {
                    return (
                      <Option key={option.id} value={option.id}>
                        {option.name}
                      </Option>
                    );
                  })}
                </Select>
              )}
            </FormItem>
            <FormItem>
              {form.getFieldDecorator('expressNo', {})(<Input placeholder="请输入物流单号" />)}
            </FormItem>
          </div>
        </Modal>
      )}
      {modalStyle === 'remark' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <FormItem>
            {form.getFieldDecorator('remark', {
              initialValue: remark,
            })(<TextArea rows={4} placeholder="请输入备注信息" />)}
          </FormItem>
        </Modal>
      )}
      {modalStyle === 'buyoutPrice' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <FormItem>
            {form.getFieldDecorator('buyoutPrice', {
              initialValue: buyoutPrice,
            })(<Input placeholder="修改买断价格" />)}
          </FormItem>
        </Modal>
      )}
      {modalStyle === 'settle' && (
        <Modal
          destroyOnClose
          title={typesObj[modalStyle]}
          visible={modalVisible}
          onOk={okHandle}
          width="450px"
          onCancel={() => handleModalVisible()}
        >
          <div>
            <span style={{ marginRight: '20px' }}>宝贝状态</span>
            <Radio.Group onChange={onRadioChange} value={radioValue}>
              <Radio value="good">完好</Radio>
              <Radio value="damage">损坏</Radio>
              <Radio value="lose">丢失</Radio>
              <Radio value="other">其他</Radio>
            </Radio.Group>
            {radioValue === 'damage' && (
              <div style={{ marginTop: '15px' }}>
                <span>损坏赔偿金：</span>
                <InputNumber min={0} defaultValue={0} value={damageVal} onChange={damageValue} />
                <span>元</span>
              </div>
            )}
            {radioValue === 'lose' && (
              <div style={{ marginTop: '15px' }}>
                <span>丢失赔偿金：</span>
                <InputNumber min={0} defaultValue={0} value={damageVal} onChange={damageValue} />
                <span>元</span>
              </div>
            )}
            <div style={{ marginTop: 20 }}>
              {radioValue === 'other' && (
                <div>
                  <Form.Item labelCol={{ span: 6 }} label="违约金：">
                    {form.getFieldDecorator('amount', {
                      initialValue: record.userViolationRecords[0]
                        ? record.userViolationRecords[0].amount
                        : 0,
                    })(<InputNumber min={0} />)}
                    <span> 元</span>
                  </Form.Item>
                  <Form.Item labelCol={{ span: 6 }} label="违约原因：">
                    {form.getFieldDecorator('reason', {
                      initialValue: record.userViolationRecords[0]
                        ? record.userViolationRecords[0].reason
                        : '',
                    })(<Input style={{ width: '60%' }} placeholder="请输入违约原因" />)}
                  </Form.Item>
                </div>
              )}
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
});

@Form.create()
class ExportModal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  transdate = endTime => {
    const date = new Date();
    date.setFullYear(endTime.substring(0, 4));
    date.setMonth(endTime.substring(5, 7) - 1);
    date.setDate(endTime.substring(8, 10));
    date.setHours(endTime.substring(11, 13));
    date.setMinutes(endTime.substring(14, 16));
    date.setSeconds(endTime.substring(17, 19));
    return Date.parse(date);
  };
  handleExportSubmit = e => {
    e.preventDefault();
    const { form, handleListExport, exportModalCancel } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { createTime, time, status } = values;
        const orderTime = dateTimeFormat(createTime);
        if (
          this.transdate(orderTime[1]) - this.transdate(orderTime[0]) >
          31 * 24 * 60 * 60 * 1000
        ) {
          message.error('下单时间范围不能超过一个月');
          return;
        }
        const rentTime = dateTimeFormat(time);
        const payload = {
          status,
          createTime: orderTime,
          time: rentTime,
        };
        if (status || (status && status.length > 0) || orderTime || rentTime) {
          handleListExport(payload);
          exportModalCancel();
        } else {
          message.warn('请至少选择一项');
        }
      }
    });
    //日期转时间戳
  };

  render() {
    const { form, exportVisible, exportModalCancel } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };

    const buttonItemLayout = {
      wrapperCol: { span: 14, offset: 6 },
    };
    return (
      <Modal
        destroyOnClose
        title="导出数据"
        visible={exportVisible}
        width="550px"
        onCancel={exportModalCancel}
        footer={null}
      >
        <Form {...formItemLayout} onSubmit={this.handleExportSubmit}>
          <Form.Item labelCol={{ span: 6 }} label="下单时间：">
            {getFieldDecorator('createTime', {})(
              <RangePicker
                placeholder={['下单开始时间', '下单结束时间']}
                separator="至"
                showTime={{
                  // defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                  defaultValue: [moment('00:00:00'), moment('23:59:59')],
                }}
                format={timeStr}
              />
            )}
          </Form.Item>
          <Form.Item labelCol={{ span: 6 }} label="起租日期：">
            {getFieldDecorator('time', {})(
              <RangePicker
                placeholder={['起租开始时间', '起租结束时间']}
                separator="至"
                showTime={{
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                }}
                format={timeStr}
              />
            )}
          </Form.Item>
          <Form.Item labelCol={{ span: 6 }} label="订单状态：">
            {getFieldDecorator('status')(
              <Select mode="multiple" placeholder="请选择订单状态">
                {statusArr.map(item => (
                  <Option key={item.key} value={item.key}>
                    {item.value}
                  </Option>
                ))}
              </Select>
            )}
          </Form.Item>
          <Form.Item {...buttonItemLayout}>
            <Button htmlType="submit" type="primary">
              确认导出
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

@connect(({ order, loading }) => ({
  ...order,
  // ...report.reportDetal,
  loading: loading.models.order,
}))
@Form.create()
class TableList extends Component {
  state = {
    start_date: '',
    end_date: '',
    orderId: 0,
    userOrderCashId: 0,
    radioValue: 'good',
    checkValue: false,
    damageVal: 0, // 损坏
    remark: '',
    record: {},
    exportVisible: false,
    previewVisible: false,
    previewImage: '',
    userIdCardPhotoCertStatus: null,//身份证信息,1已认证，0未认证
    userFaceCertStatus: null,//脸部信息，1已认证，0未认证
    recordOrder: {},//查看原证件的
    oldCardVisible: false,//原身份信息的model

    rejectedVisible: false,//审核拒绝的model
    rejectedDetailVisible: false,//审核拒绝规则详情的model
    fileList: [],
    rejectReason: null,//拒绝原因
    shopId: null,//店铺id
    rejectOrderId: null,//拒绝用的订单id
    comfirmRejectedDetailVisible: false,//二次确认
    imgSrc: null,//拒绝凭证图片预览
    imgVisible: false,//拒绝凭证图片预览model
    confirmLoading: false,//二次确认拒绝的按钮的异步状态
    rejectDetailVisible: false,//拒绝详情的model
    imgCurrent: 0,//点击图片的索引
    imgLength: 0,//拒绝凭证数组的长度
    rejectImg: [],//拒绝凭证数组
    viewRejectImgVisible: false,//放大拒绝凭证图片的model

    confirmSettlementVisible: false,//出具结算的二次确认
    confirmSettlementInfo: {},//结算二次确认的详情
    confirmSettlementPayload: {},//出结算的参数

  };

  componentDidMount() {
    const { dispatch, queryParams } = this.props;
    this.setState({
      start_date: queryParams.time ? queryParams.time[0] : null,
      end_date: queryParams.time ? queryParams.time[1] : null,
    });
    dispatch({
      type: 'order/queryAllOrder',
      payload: { ...queryParams, type: 0, overDueStatus: null },
    });
  }

  setDispatch(modalStyle) {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/save',
      payload: {
        modalVisible: true,
        modalStyle,
      },
    });
  }

  callback = e => {
    // const { queryParams } = this.props;
    // console.log(77777,e)
    let status = e;
    if (e === 'WAITING_SETTLEMENT') {
      status = 'WAITING_SETTLEMENT,WAITING_SETTLEMENT_PAYMENT';
    }
    const query = Object.assign(
      {
        userName: null,
        addressUserName: null,
        addressUserPhone: null,
        orderId: null,
        prodcutName: null,
        productId: null,
        subStatus: null,
        telephone: null,
        time: null,
        createTime: null,
        status: '',
        pageNumber: 1,
        pageSize: 10,
      },
      {
        status,
      }
    );
    this.queryList(query);
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, queryParams } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const {
          start_date,
          end_date,
          orderId,
          prodcutName,
          productId,
          subStatus,
          telephone,
          userName,
          addressUserName,
          addressUserPhone,
          createTime: times,
        } = values;
        const start = start_date && moment(start_date).format(formatStr);
        const end = end_date && moment(end_date).format(formatStr);
        const time = !start || !end_date ? null : [start, end];
        const createTime = [
          times[0] ? moment(times[0]).format(timeStr) : null,
          times[1] ? moment(times[1]).format(timeStr) : null,
        ];
        const params = Object.assign({}, queryParams, {
          orderId,
          prodcutName,
          productId,
          subStatus,
          telephone,
          userName,
          addressUserName,
          addressUserPhone,
          status: '',
          time,
          createTime: createTime[0] ? createTime : null,
          pageNumber: 1,
        });
        this.queryList(params);
      }
    });
  };

  reset = () => {
    const { form } = this.props;
    form.resetFields();
    this.queryList({
      userName: null,
      addressUserName: null,
      addressUserPhone: null,
      orderId: null,
      prodcutName: null,
      productId: null,
      subStatus: null,
      telephone: null,
      time: null,
      createTime: null,
      status: '',
      pageNumber: 1,
      pageSize: 10,
    });
  };

  goLink = id => {
    router.push(`/list/detail/${id}`);
  };

  handleTableChange = page => {
    const { queryParams } = this.props;
    const query = {
      ...queryParams,
      pageNumber: page.current,
    };
    this.queryList(query);
  };

  deliverGoods = (type, orderId) => {
    this.setState({
      orderId,
    });
    const { dispatch } = this.props;
    this.setDispatch(type);
    dispatch({
      type: 'order/queryDeliverOps',
    });
  };

  handleModalVisible = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/save',
      payload: {
        modalVisible: false,
      },
    });
  };

  handleDeliver = params => {
    const { dispatch, modalStyle } = this.props;
    const { orderId, userOrderCashId, checkValue, damageVal, radioValue, record } = this.state;
    if (modalStyle === 'settle') {
      const statusFormatObj = {
        good: 1,
        damage: 2,
        lose: 3,
        other: 4
      };
      const status = statusFormatObj[radioValue];
      let listStatus = [];
      if (status) {
        listStatus = [status];
      }
      let { end, start } = params;
      start = start && moment(start).format(formatStr);
      end = end && moment(end).format(formatStr);
      if (status === 4) {
        // '其它'
        const payload = {
          orderId,
          originalOrderId: record.originalOrderId ? record.originalOrderId : orderId,
          losePrice: status === 3 ? damageVal : 0,
          listStatus,
          damagePrice: status === 2 ? damageVal : 0,
          userViolationRecords: {
            start,
            end,
            type: 1,
            reason: params.reason,
            amount: params.amount,
            userOrderCashId,
          },
        };
        if (record.userViolationRecords[0] && record.userViolationRecords[0].id) {
          payload.userViolationRecords.id = record.userViolationRecords[0].id;
        }
        this.setState({
          confirmSettlementVisible: true,
          confirmSettlementInfo: {
            listStatus,
            reason: params.reason,
            amount: params.amount
          },
          confirmSettlementPayload: payload
        })
      } else {
        // '其它以外的'
        const payload = {
          orderId,
          originalOrderId: record.originalOrderId ? record.originalOrderId : orderId,
          losePrice: status === 3 ? damageVal : 0,
          listStatus,
          damagePrice: status === 2 ? damageVal : 0,
        };
        this.setState({
          confirmSettlementVisible: true,
          confirmSettlementInfo: {
            listStatus,
            reason: params.reason,
            amount: status === 3 ? damageVal : status === 2 ? damageVal : 0,
          },
          confirmSettlementPayload: payload
        })
      }
    } else {
      dispatch({
        type: modalStyle === 'deliver' ? 'order/sendDeliver' : 'order/addRemark',
        payload: {
          ...params,
          orderId,
          originalOrderId: record.originalOrderId ? record.originalOrderId : orderId,
        },
      });
    }
  };
  // 二次确认的
  confirmSettlement = () => {
    this.props.dispatch({
      type: 'order/settleOrderOver',
      payload: this.state.confirmSettlementPayload,
      callback: res => {
        if (res && res.code > 0) {
          this.setState({
            confirmSettlementVisible: false
          })
        }
      }
    })
  }

  addRemark = (type, orderId, remark) => {
    this.setState({
      orderId,
      remark,
    });
    this.setDispatch(type);
    if (type === 'card') {
      const { dispatch } = this.props;
      dispatch({
        type: 'order/getCardinformation',
        payload: {
          orderId: orderId.orderId,
        },
        callback: (res) => {
          this.setState({
            userIdCardPhotoCertStatus: !!res.idCardBackUrl && !!res.idCardFrontUrl ? 1 : 0,
            userFaceCertStatus: res.faceAuthStatus == '03' ? 1 : 0,
            recordOrder: orderId
          })
        }
      })
      // this.setState({
      //   // userIdCardPhotoCertStatus: orderId.userIdCardPhotoCertStatus,
      //   // userFaceCertStatus: orderId.userFaceCertStatus,
      //   recordOrder: orderId
      // })
    }
    if (type === 'buyoutPrice') {
      const { dispatch } = this.props;
      dispatch({
        type: 'order/businessFindBuyOutOrder',
        payload: {
          orderId,
        },
      });
    }
  };

  settleDia = (type, orderId, userOrderCashId, record) => {
    if (record.userViolationRecords && record.userViolationRecords[0]) {
      let radioValue = 'good';
      radioValue = record.damagePrice ? 'damage' : radioValue;
      radioValue = record.lostPrice ? 'lose' : radioValue;
      this.setState({
        checkValue: true,
        radioValue,
        damageVal: record.damagePrice || record.lostPrice,
      });
    }
    this.setState({
      orderId,
      userOrderCashId,
      record,
    });
    this.setDispatch(type);
  };

  closeModal = orderId => {
    this.setState({ orderId });
  };

  onRadioChange = e => {
    const { checkValue } = this.state;
    this.setState({
      radioValue: e.target.value,
      checkValue: e.target.value === 'good' ? false : checkValue,
    });
  };

  damageValue = val => {
    this.setState({
      damageVal: val,
    });
  };

  onCheckChange = e => {
    const { radioValue } = this.state;
    this.setState({
      checkValue: e.target.checked,
      radioValue: e.target.checked && radioValue === 'good' ? 'other' : radioValue,
    });
  };

  confirm = () => {
    const { dispatch } = this.props;
    const { orderId } = this.state;
    dispatch({
      type: 'order/closeOrder',
      payload: {
        orderId,
      },
    });
  };

  showExportModal = () => {
    this.setState({ exportVisible: true });
  };

  handlePreview = async file => {
    this.setState({
      previewImage: file.url,
      previewVisible: true,
    });
  };

  handleCancel = () => this.setState({ previewVisible: false });
  queryList(param) {
    if (param.status == 'USER_APPLICATION') {
      param.status = 'WAITING_BUSINESS_DELIVERY'
      param.examineStatus = 1
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'order/queryAllOrder',
      payload: {
        ...param,
        type: 0,
      },
    });
  }

  //查看身份信息
  viewOldCard = (data) => {
    const { dispatch } = this.props;
    const { orderId } = this.state;
    dispatch({
      type: 'order/getUserIdCardPhotoInfo',
      payload: {
        uid: data.uid,
      },
      callback: res => {
        if (res) {
          this.setState({
            oldCardVisible: true
          })
        }
      }
    })
  }
  //拒绝原因
  rejectedReasonChange = (e) => {
    this.setState({
      rejectReason: e.target.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "")
    })
    if (e.target.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "").length > 150) {
      message.error('拒绝原因字数不能超过150，请精简')
    }
  }
  //图片预览
  handleRejectPreview = file => {
    this.setState({
      imgSrc: file.response.data,
      imgVisible: true,
    });
  };
  // 上传的回调
  handleUploadChange = ({ file, fileList, event }) => {
    // console.log('当前文件对象',file);
    // console.log('当前的文件列表',fileList);
    // console.log('上传中的服务端响应内容',event);
    this.setState({ fileList })
  };
  //上传图片不能超过2M
  beforeUpload = (file) => {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过2MB!');
    }
    return this.checkImage(isLt2M);
  }
  //checkImage  返回一个promise  检测通过返回resolve  失败返回reject阻止图片上传
  checkImage(isLt2M) {
    return new Promise(function (resolve, reject) {
      if (isLt2M) {
        resolve()
      } else {
        reject()
      }
    });
  }

  submitReject = () => {
    let error = false;
    if (!this.state.rejectReason) {
      message.error("拒绝原因是必填字段，请输入")
      error = true
      return
    }
    if (this.state.rejectReason && this.state.rejectReason.length > 150) {
      message.error("拒绝原因字数不能超过150，请精简")
      error = true
      return
    }
    if (!error) {
      this.setState({ comfirmRejectedDetailVisible: true })
    }
  }

  //二次确认审核拒绝
  confirmSubmitReject = () => {
    let imgUrl = this.state.fileList.map(item => {
      if (item.status == 'done') {
        return item.response.data
      }
    })
    this.setState({
      confirmLoading: true
    }, () => {
      this.props.dispatch({
        type: 'order/rejectOrder',
        payload: {
          orderId: this.state.rejectOrderId,
          shopId: this.state.shopId,
          shopOperatorId: getShopAdminId(),//登录人的id
          closeReason: this.state.rejectReason,
          certificateImages: imgUrl
        },
        callback: res => {
          // console.log(res)
          if (res.data == '关闭成功') {
            message.success('成功拒绝')
            this.setState({
              rejectedVisible: false,
              comfirmRejectedDetailVisible: false,
              fileList: [],
              rejectReason: null,
              confirmLoading: false,
            }, () => this.callback('WAITING_BUSINESS_DELIVERY'))
          } else {
            message.error(res.msg)
            this.setState({
              confirmLoading: false,
              comfirmRejectedDetailVisible: false,
            })
          }
        }
      })
    })
  }

  //查看拒绝订单详情
  viewRejectDetail = (id) => {
    this.setState({
      rejectDetailVisible: true
    })
    this.props.dispatch({
      type: 'order/viewRejectDetail',
      payload: {
        orderId: id
      },
      callback: res => {
        // console.log(res)
      }
    })
  }

  // viewRejectImg
  viewRejectImg = (data, index) => {
    this.setState({
      viewRejectImgVisible: true,
      rejectImg: data,
      imgLength: data.length,
      imgCurrent: index,
    });
  };
  // 下一张
  next = () => {
    let a = this.state.imgCurrent;
    a += 1;
    this.setState({
      imgCurrent: a,
    });
  };
  // 上一张
  prev = () => {
    let a = this.state.imgCurrent;
    a -= 1;
    this.setState({
      imgCurrent: a,
    });
  };

  render() {
    const {
      form,
      queryParams,
      list,
      total,
      loading,
      modalVisible,
      deliverOptions,
      modalStyle,
      idCardNo,
      reportDetal,
      buyoutPrice,
      picturesList,
      getSignOosUrl,
      ocr,
      rejectDetail
    } = this.props;
    // console.log('props,props',this.props)
    const { getFieldDecorator } = form;
    const {
      start_date,
      end_date,
      radioValue,
      checkValue,
      damageVal,
      remark,
      record: listItem,
      exportVisible,
      previewVisible,
      previewImage,
      userIdCardPhotoCertStatus,//是否通过身份证认证
      userFaceCertStatus,//是否通过人脸认证
      recordOrder,//查看原证件的数据
      oldCardVisible,//原身份信息的model

      rejectedVisible,//审核拒绝的model
      rejectedDetailVisible,//审核拒绝规则详情的model
      fileList,//
      rejectReason,
      comfirmRejectedDetailVisible,//二次同意拒绝的model
      imgSrc,//拒绝凭证图片预览
      imgVisible,//拒绝凭证图片预览model
      confirmLoading,//二次确认按钮的异步状态
      rejectDetailVisible,//拒绝详情的model
      imgCurrent,//点击图片的索引
      viewRejectImgVisible,//放大拒绝凭证图片的model
      rejectImg,//拒绝凭证图片数组
      imgLength,//拒绝凭证数组的长度

      confirmSettlementVisible,//出具结算的二次确认
      confirmSettlementInfo
    } = this.state;
    const columns = [
      {
        title: '订单号',
        dataIndex: 'orderId',
        key: 'orderId',
        fixed: 'left',
        width: 150,
      },
      {
        title: '商品',
        dataIndex: 'product',
        key: 'product',
        width: 250,
        fixed: 'left',
        render: (text, record) => {
          return (
            <div className={styles.product}>
              {record.images && <Avatar shape="square" size={64} src={record.images[0].src} />}
              <div className={styles.product_desc}>
                <div className={styles.product_name}>
                  <a href="javascript:;" onClick={() => this.goLink(record.orderId)}>
                    {record.productName}
                  </a>
                </div>
                <div className={styles.product_sku}>{record.skuTitle}</div>
              </div>
            </div>
          );
        },
      },
      {
        title: '起租日期',
        dataIndex: 'rentStart',
        key: 'rentStart',
      },
      {
        title: '归还日期',
        dataIndex: 'unrentTime',
        key: 'unrentTime',
      },
      {
        title: '当前租期',
        dataIndex: 'currentPeriods',
        key: 'currentPeriods',
        render: (text, record) => {
          return <div>{`${record.currentPeriods || '-'}/${record.totalPeriods || '-'}`}</div>;
        },
      },
      {
        title: '总租金',
        dataIndex: 'totalRent',
        key: 'totalRent',
      },
      {
        title: '已付租金',
        dataIndex: 'realRent',
        key: 'realRent',
      },
      {
        title: '下单用户',
        dataIndex: 'telephone',
        key: 'telephone',
      },
      {
        title: '用户姓名',
        dataIndex: 'realName',
        key: 'realName',
      },
      {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        render: (text, record) => {
          return <div>{text == 'WAITING_BUSINESS_DELIVERY' && record.examineStatus == 1 ? '用户申请关单' : statusConfigList[record.status]}</div>;
        },
      },
      {
        title: '操作',
        key: 'action',
        fixed: 'right',
        width: 100,
        render: (text, record) => (
          <div>
            <a
              className={styles.link}
              href="javascript:;"
              onClick={() => this.goLink(record.orderId)}
            >
              查看
            </a>
            <br />
            <a
              className={styles.link}
              href="javascript:;"
              onClick={() => this.addRemark('card', record)}
            >
              证件
            </a>
            <br />
            <a
              className={styles.link}
              href="javascript:;"
              onClick={() => this.addRemark('remark', record.orderId, record.shopRemark)}
            >
              备注
            </a>
            <br />
            {record.status === 'WAITING_BUSINESS_DELIVERY' && (
              <a
                className={styles.link}
                href="javascript:;"
                onClick={() => this.deliverGoods('deliver', record.orderId)}
              >
                发货
              </a>
            )}
            {record.status === 'WAITING_USER_RECEIVE_CONFIRM' && (
              <a
                className={styles.link}
                href="javascript:;"
                onClick={() => this.deliverGoods('deliver', record.orderId)}
              >
                修改物流信息
              </a>
            )}
            <div>
              {record.shopCanClose && (
                <a onClick={() => this.setState({ rejectedVisible: true, shopId: record.id, rejectOrderId: record.orderId })} style={{ display: 'block' }}>
                  审核拒绝
                </a>
              )}
              {record.status === 'SHOP_RISK_REVIEW_CLOSE_ORDER' && (
                <a style={{ display: 'block' }} onClick={() => this.viewRejectDetail(record.orderId)}>
                  拒绝详情
                </a>
              )}
              {record.status === 'WAITING_PAYMENT' && (
                <Popconfirm title="确定关闭订单吗?" onConfirm={() => this.confirm()}>
                  <a onClick={() => this.closeModal(record.orderId)} href="javascript:;">
                    关闭订单
                  </a>
                </Popconfirm>
              )}
              {record.status === 'WAITING_SETTLEMENT' && (
                <a
                  className={styles.link}
                  onClick={() =>
                    this.settleDia('settle', record.orderId, record.orderCashId, record)
                  }
                  href="javascript:;"
                >
                  结算
                </a>
              )}
            </div>
          </div>
        ),
      },
    ];

    const parentProps = {
      modalVisible,
      deliverOptions,
      modalStyle,
      handleModalVisible: this.handleModalVisible,
      handleDeliver: this.handleDeliver,
      radioValue,
      checkValue,
      damageVal,
      onRadioChange: this.onRadioChange,
      damageValue: this.damageValue,
      onCheckChange: this.onCheckChange,
      handlePreview: this.handlePreview,
      handleCancel: this.handleCancel,
      previewVisible,
      previewImage,
      remark,
      record: listItem,
      idCardNo,
      reportDetal,
      buyoutPrice,
      picturesList,
      userIdCardPhotoCertStatus,//是否通过身份证认证
      userFaceCertStatus,//是否通过人脸认证
      ocr,
      recordOrder,//查看原证件数据
    };

    const exportModalProps = {
      exportVisible,
      exportModalCancel: () => {
        this.setState({ exportVisible: false });
      },
      handleListExport: payload => {
        const { dispatch } = this.props;
        dispatch({
          type: 'order/exportOrderList',
          payload,
        });
      },
    };

    const uploadButton = (
      <div>
        <Icon type='plus' />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    const confirmSettlementStatus = {
      1: '完好',
      2: '损坏',
      3: '丢失',
      4: '其它',
    }


    return (
      <PageHeaderWrapper title="所有订单">
        <Form onSubmit={this.handleSubmit} className={styles.form}>
          <Row gutter={24}>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('orderId', {
                  initialValue: queryParams.orderId,
                })(<Input placeholder="订单编号" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('prodcutName', {
                  initialValue: queryParams.prodcutName,
                })(<Input placeholder="商品名称" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('productId', {
                  initialValue: queryParams.productId,
                })(<Input placeholder="商品ID" />)}
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('userName', {
                  initialValue: queryParams.userName,
                })(<Input placeholder="下单人姓名" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('telephone', {
                  initialValue: queryParams.telephone,
                })(<Input placeholder="下单人手机号" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('addressUserName', {
                  initialValue: queryParams.addressUserName,
                })(<Input placeholder="收货人姓名" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('addressUserPhone', {
                  initialValue: queryParams.addressUserPhone,
                })(<Input placeholder="收货人手机号" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                {getFieldDecorator('start_date', {
                  initialValue: start_date ? moment(start_date) : null,
                })(<DatePicker placeholder="起租开始时间" />)}
              </Form.Item>
              <span
                style={{
                  display: 'inline-block',
                  width: '24px',
                  textAlign: 'center',
                  lineHeight: 2.8,
                }}
              >
                至
              </span>
              <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                {getFieldDecorator('end_date', {
                  initialValue: end_date ? moment(end_date) : null,
                })(<DatePicker placeholder="起租结束时间" />)}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                {getFieldDecorator('createTime', {
                  initialValue: [
                    queryParams.createTime && queryParams.createTime[0]
                      ? moment(queryParams.createTime[0])
                      : null,
                    queryParams.createTime && queryParams.createTime[1]
                      ? moment(queryParams.createTime[1])
                      : null,
                  ],
                })(
                  <RangePicker
                    placeholder={['创建开始时间', '创建结束时间']}
                    separator="至"
                    showTime
                    format={timeStr}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Button htmlType="submit" type="primary">
            搜索
          </Button>
          <Button style={{ marginLeft: '15px' }} onClick={this.reset}>
            重置
          </Button>
          <Button style={{ float: 'right' }} type="primary" onClick={this.showExportModal}>
            导出
          </Button>
        </Form>
        <Tabs activeKey={queryParams.status} onChange={this.callback}>
          <TabPane tab="全部" key="" />
          <TabPane tab="待支付" key="WAITING_PAYMENT" />
          <TabPane tab="待发货" key="WAITING_BUSINESS_DELIVERY" />
          <TabPane tab="待用户收货" key="WAITING_USER_RECEIVE_CONFIRM" />
          <TabPane tab="租用中" key="WAITING_GIVE_BACK" />
          <TabPane tab="待归还" key="TO_BE_RETURNED" />
          <TabPane tab="待结算" key="WAITING_SETTLEMENT,WAITING_SETTLEMENT_PAYMENT" />
          <TabPane tab="逾期" key="ORDER_VERDUE" />
          <TabPane tab="订单完成" key="ORDER_FINISH" />
          <TabPane tab="审核拒绝" key="SHOP_RISK_REVIEW_CLOSE_ORDER" />
          <TabPane tab="用户申请关单" key="USER_APPLICATION" />
        </Tabs>
        <Spin spinning={loading} delay={500}>
          <Table
            rowKey={record => record.orderId}
            className={styles.table}
            columns={columns}
            dataSource={list}
            scroll={{ x: 1800 }}
            pagination={{
              current: queryParams.pageNumber,
              pageSize: queryParams.pageSize,
              total,
            }}
            onChange={this.handleTableChange}
          />
        </Spin>
        <CreateDeliverForm {...parentProps} />
        <ExportModal {...exportModalProps} />
        <Modal title="原身份信息" width="610px" visible={oldCardVisible} footer={null} onCancel={() => this.setState({ oldCardVisible: false })}>
          <div>
            <h3>人像面：</h3>
            <img src={idCardNo && idCardNo.idCardFront} style={{ width: '100%', height: '100%', paddingBottom: '10px' }} />
            <h3>国徽面：</h3>
            <img src={idCardNo && idCardNo.idCardBack} style={{ padding: '10px 0', width: '100%', height: '100%', }} />
            <h3>手持身份证面：</h3>
            <img src={idCardNo && idCardNo.idCardHandHeld} style={{ width: '100%', height: '100%', }} />
          </div>
        </Modal>
        {/* 审核拒绝 */}
        <Modal
          title={
            <Row type='flex' gutter={16}>
              <Col>审核拒绝</Col>
              <Col>
                <a style={{ fontSize: 14 }} onClick={() => this.setState({ rejectedDetailVisible: true })}>规则详情</a>
              </Col>
            </Row>
          }
          width="610px"
          visible={rejectedVisible}
          footer={[
            <Button key='submit' onClick={this.submitReject} type='primary'>提交</Button>
          ]}
          onCancel={() => this.setState({ rejectedVisible: false, fileList: [], rejectReason: null })}
        >
          <Row>
            <Row type='flex'>
              <Col span={3} style={{ whiteSpace: 'nowrap' }}><b style={{ color: 'red' }}>*</b>拒绝原因：</Col>
              <Col span={16}>
                <TextArea onChange={this.rejectedReasonChange} maxLength='151' value={rejectReason} rows={5} placeholder='请输入拒绝原因，不要超过150个字' />
              </Col>
            </Row>
            <Row type='flex' style={{ marginTop: 15 }}>
              <Col span={3}>拒绝凭证：</Col>
              <Col span={16}>
                <Upload
                  accept="image/*"
                  action={uploadUrl}
                  listType="picture-card"
                  fileList={fileList}
                  beforeUpload={this.beforeUpload}
                  showUploadList={{
                    showDownloadIcon: false
                  }}
                  onPreview={this.handleRejectPreview} //预览
                  onChange={this.handleUploadChange}
                >
                  {fileList.length >= 9 ? null : uploadButton}
                </Upload>
              </Col>
            </Row>
            <h2>规则详情</h2>
            <Row>
              <Col>1、仅商家审核风控拒绝类型的订单可通过该方式关单。</Col>
              <Col>2、拒绝原因需如实填写，并阐述审核拒绝的关键因素；对于特定因素可上传照片凭证进行佐证：如用户逾期记录、多次联系用户无法接通记录、用户风控数据记录等。</Col>
              <Col>3、平台会对商家拒绝订单进行抽查，若发现非商家风控拒绝类型的订单通过该方式关单或拒绝原因等<b style={{ color: 'red' }}>与事实不符，每单平台将扣取商家100元惩罚金。</b></Col>
            </Row>
          </Row>
        </Modal>
        {/* 规则详情 */}
        <Modal
          title={
            <Row type='flex' justify='center'>
              <Col>规则详情</Col>
            </Row>
          }
          maskClosable={false}
          closable={false}
          width="610px"
          visible={rejectedDetailVisible}
          footer={[
            <Button key='submit' type='primary' onClick={() => this.setState({ rejectedDetailVisible: false })}>
              知道了
            </Button>
          ]}
          onCancel={() => this.setState({ rejectedDetailVisible: false })}>
          <Row>
            <Col>1、仅商家审核风控拒绝类型的订单可通过该方式关单。</Col>
            <Col>2、拒绝原因需如实填写，并阐述审核拒绝的关键因素；对于特定因素可上传照片凭证进行佐证：如用户逾期记录、多次联系用户无法接通记录、用户风控数据记录等。</Col>
            <Col>3、平台会对商家拒绝订单进行抽查，若发现非商家风控拒绝类型的订单通过该方式关单或拒绝原因等<b style={{ color: 'red' }}>与事实不符，每单平台将扣取商家100元惩罚金。</b></Col>
          </Row>
        </Modal>
        {/* 审核拒绝的二次确认 */}
        <Modal
          title="是否确定拒绝该订单?"
          style={{ top: 250 }}
          visible={comfirmRejectedDetailVisible}
          footer={null}
          onCancel={() => this.setState({ comfirmRejectedDetailVisible: false })}
        >
          <Row type='flex' gutter={4} justify='center'>
            <Col span={4}>
              <Button onClick={() => this.setState({ comfirmRejectedDetailVisible: false })}>
                取消
              </Button>
            </Col>
            <Col span={4}>
              <Button type='primary' disabled={confirmLoading} onClick={this.confirmSubmitReject}>
                确定
              </Button>
            </Col>
          </Row>
        </Modal>
        {/* //申请拒绝的拒绝凭证预览 */}
        <Modal visible={imgVisible} footer={null} onCancel={() => this.setState({ imgVisible: false })} width={600}>
          <img src={imgSrc ? imgSrc : null} alt="" style={{ width: '100%', paddingTop: 15 }} />
        </Modal>
        {/* 拒绝详情 */}
        <Modal
          title='拒绝详情'
          visible={rejectDetailVisible}
          footer={null}
          onCancel={() => this.setState({ rejectDetailVisible: false })}
          width={600}
        >
          <Row>
            <Col>拒绝时间：{rejectDetail && rejectDetail.createTime}</Col>
            <Col style={{ padding: '10px 0' }}>拒绝原因：{rejectDetail && rejectDetail.closeReason}</Col>
            <Row type='flex'>
              <Col style={{ whiteSpace: 'nowrap' }} span={3}>拒绝凭证：</Col>
              <Col span={21} style={{ display: 'flex', flexWrap: 'wrap' }}>
                {
                  rejectDetail && rejectDetail.certificateImages ? rejectDetail.certificateImages.map((item, index) => (
                    <Col key={index}>
                      <img onClick={() => this.viewRejectImg(rejectDetail.certificateImages, index)} style={{ width: 85, height: 85, marginBottom: '10px', objectFit: 'cover', marginRight: '10px' }} src={item} alt="" />
                    </Col>
                  )) : <span>未上传</span>
                }

              </Col>
            </Row>
          </Row>
        </Modal>
        {/* 拒绝详情，图片放大 */}
        <Modal
          visible={viewRejectImgVisible}
          footer={
            <div style={{ textAlign: 'center' }}>
              <Button disabled={imgCurrent <= 0 ? true : false} onClick={this.prev}>
                上一张
              </Button>
              <Button
                disabled={imgCurrent >= imgLength - 1 ? true : false}
                type="primary"
                onClick={this.next}
              >
                下一张
              </Button>
            </div>
          }
          onCancel={() => this.setState({ viewRejectImgVisible: false })}
          width={600}
        >
          <img
            src={rejectImg.length > 0 ? rejectImg[imgCurrent] : null}
            alt=""
            style={{ width: '100%', paddingTop: 15 }}
          />
        </Modal>
        {/* 商家结算的二次确认 */}
        <Modal
          title="是否确认结算？"
          zIndex={2000}
          visible={confirmSettlementVisible}
          onOk={this.confirmSettlement}
          onCancel={() => this.setState({ confirmSettlementVisible: false })}
        >
          <Row>
            <Col>结算类型：{confirmSettlementStatus[confirmSettlementInfo.listStatus]}</Col>
            <Col>结算金额：{confirmSettlementInfo.amount}元</Col>
            {
              confirmSettlementInfo.reason && <Col>原因：{confirmSettlementInfo.reason}</Col>
            }
          </Row>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
